<template>
  <div class="information">
    <van-popup class="contact-details-setting" v-model:show="props.showSetting" position="right"
      :style="{ width: '100%', height: '100%' }">
      <div class="information_title">
        <TitleNavBars :propsItem="{ title: '聊天详情' }" :clearContactDetails="clearinformation" :rightInfo="false" />
      </div>
      <div class="content">
        <div class="Information">
          <div>
            <img :src="props.propsItemTitle.img" alt="">
            <span>{{ props.propsItemTitle.title }}</span>
          </div>
        </div>
        <van-cell title="查找聊天内容" is-link />
        <van-cell title="消息免打扰" is-link class="listTop">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #right-icon>
            <van-switch v-model="checkedX" />
          </template>
        </van-cell>
        <van-cell title="置顶聊天" is-link class="listTop">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #right-icon>
            <van-switch v-model="checkedH" />
          </template>
        </van-cell>
        <van-cell title="提醒" is-link class="listTop">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #right-icon>
            <van-switch v-model="checkeOf" />
          </template>
        </van-cell>
        <van-cell title="设置当前聊天背景" is-link />
        <van-cell title="清空聊天记录" class="listTop" />
        <van-cell title="投诉" is-link />
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const checkedX = ref(false);
const checkedH = ref(false);
const checkeOf = ref(false);
import TitleNavBars from './titleNavBars.vue'
const props = defineProps(["showSetting", "propsItemTitle"]);

const emit = defineEmits(["clearinformation", "informationInfo"]);
const clearinformation = () => {
  emit("clearinformation", false);
}

</script>
<style scoped lang="scss">
.Information {
  width: 100%;
  height: 80px;
  background: var(--van-cell-background);
  display: flex;
  align-items: center;
}

.Information>div {
  display: flex;
  flex-direction: column;
  align-items: center
}

div>img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  margin-bottom: 5px;
}

.Information>div {
  margin-left: 18px;
}

.content {
  height: 100%;
  width: 100%;
  background-color: #eee;

  .sc {
    width: 100%;
    margin-top: 5px;
    color: red;
  }
}

.van-cell {
  margin: 5px 0px;
}

.van-cell:nth-of-type(2) {
  margin-bottom: 0px;
}

.van-cell:nth-of-type(3) {
  margin: 0px;
}

.van-cell:nth-of-type(4) {
  margin-top: 0px;
}
</style>
